import React,{useState,useEffect} from 'react'
import axios from 'axios'
export default function Exam() {
    const [list, setList] = useState([])
    const [ind, setInd] = useState(0)
    const [answerList, setAnswerList] = useState({})
    useEffect(() => {
        axios.get('http://localhost:7001/list').then(res=>{
            if(res.data.code === 1){
                setList(res.data.data)
            }
        })
    },[])
    const setIndFun = (num) => {
        setInd(prev=> {
            return prev+=num
        })
    }
    const submit = () => {
        // answerList = {1:1,3:"10,11,12"} => [{id:1,answer:1},{id:2,answer:4}]
        let list = []
        for(let key in answerList) {
            list.push({
                id:key,
                answer:answerList[key]
            })
        }
        axios.post('http://localhost:7001/list', {answerList: list}).then(res => {
            if(res.data.code===1){
                alert(`您的分数为${res.data.data.allScore}`)
            }
        })
    }
    return (
        <div>
            <QuestionStem item={list[ind] || {}} setAnswerList={setAnswerList} answerList={answerList}></QuestionStem>
            {ind!==0?<button onClick={() => {setIndFun(-1)}}>上一题</button>: ""}
            {ind!==list.length-1?<button onClick={() => {setIndFun(1)}}>下一题</button>: ""}
            <button onClick={() => {
                submit()
            }}>提交</button>
        </div>
    )
}

function QuestionStem({item,setAnswerList,answerList}) {
    const typeList = [
        {type:"radio", value:"单选题"},
        {type:"multiple", value:"多选题"},
        {type:"judge", value:"判断题"},
    ]
    const getType = (type) => {
        if(!type) return;
        return typeList.filter(item=>{
            return item.type===type
        })[0].value
    }
    const getLetter = (ind) => {
        const list = ['A','B','C','D']
        return list[ind]
    }
    const clickChecks = (item,item2)=> {
        if(item.type==='radio'){
            setAnswerList(prev => {
                prev[item.id] = item2.id
                return JSON.parse(JSON.stringify(prev))
            })
        } else if(item.type==='multiple'){
            setAnswerList(prev => {
                // 判断有没有存过 也就是是选中还是取消选中
                const idList = prev[item.id] ? prev[item.id].split(',') : [];
                // 判断点击项是否存在
                const ind = idList.indexOf(item2.id+'');
                if(ind!==-1) {
                    idList.splice(ind,1)
                } else {
                    idList.push(item2.id)
                }
                
                prev[item.id] = idList.sort((a,b)=> (a*1)-(b*1)).join(',')
                return JSON.parse(JSON.stringify(prev)); // 没有深拷贝就不会触发视图更新
            })
        } else if(item.type==='judge'){ // 判断 1正确 0错误
            if(item2 === '正确') {
                setAnswerList(prev => {
                    prev[item.id] = 1
                    console.log(prev)
                    return JSON.parse(JSON.stringify(prev))
                })
            } else {
                setAnswerList(prev => {
                    prev[item.id] = 0
                    console.log(prev)
                    return JSON.parse(JSON.stringify(prev))
                })
            }
        }
    }
    const isHave = (id) => {
        if(item.type==='radio') {
            return answerList[item.id] == id
        } else if(item.type==='multiple') {
            // answerList[item.id] === '1,2,3'
            const list = answerList[item.id] ? answerList[item.id].split(',') : []
            return list.indexOf(id+'')!==-1
        } else {
            if(id==='正确') {
                return answerList[item.id] === 1
            } else if(id==='错误') {
                return answerList[item.id] === 0
            } else {
                return false
            }
        }
    }
    return <div>
        <div className="title">
            【{getType(item.type)}】{item.title}
        </div>
        {/* 单选 */}
        {(item.checks&&item.checks.length)? item.checks.map((item2,ind)=>{
            return <div 
                className={isHave(item2.id) ? "active":""}
                key={item2.id} 
                onClick={() => {
                    clickChecks(item,item2)
                }}>
                <span style={{padding:"0 10px 0 0"}}>{getLetter(ind)}.</span>{item2.content}
            </div>
        }):['正确','错误'].map((data,ind) => {
            return <div 
                className={isHave(data) ? "active":""}
                key={ind}
                onClick={() => {
                    clickChecks(item,data)
                }}>
                <span style={{padding:"0 10px 0 0"}}>{getLetter(ind)}.</span>{data}
            </div>
        })}
        {/* 多选 */}
        {/* 判断 */}
    </div>
}
